import React, { useState, useEffect } from 'react';
import { SketchPicker } from 'react-color';
import { Card, Typography } from 'antd';
import { generate, getPresetColors } from '@arco-design/color';
import './index.less';

const { Title, Paragraph } = Typography;

const ColorPickerDemo: React.FC = () => {
    const [color, setColor] = useState('#1890ff');
    const [colorList, setColorList] = useState<string[]>([]);

    useEffect(() => {
        // 初始化时生成颜色列表
        const initialList = generate(color, { list: true, dark: false });
        setColorList(initialList);
    }, []);

    const handleChangeComplete = (color: any) => {
        const list = generate(color.hex, { list: true, dark: false });
        console.log(color.hex, list);
        setColor(color.hex);
        setColorList(list);
    };

    return (
        <div className="color-picker-container">
            <Card
                title="React Color 演示"
                style={{ width: 600, margin: '0 auto' }}
            >
                <Typography>
                    <Title level={4}>Sketch 颜色选择器</Title>
                    <Paragraph>
                        这是一个使用 react-color 库的 SketchPicker
                        组件示例。您可以选择颜色，下方会显示所选颜色的十六进制值。
                    </Paragraph>
                </Typography>

                <div className="picker-wrapper">
                    <SketchPicker
                        color={color}
                        presetColors={[]}
                        onChangeComplete={handleChangeComplete}
                    />
                </div>

                <div className="color-display">
                    <div
                        className="color-preview"
                        style={{ backgroundColor: color }}
                    ></div>
                    <div className="color-value">
                        <span>选中的颜色值: </span>
                        <strong>{color}</strong>
                    </div>
                </div>

                {colorList.length > 0 && (
                    <div className="color-palette-display">
                        <Title level={5}>颜色阶梯展示</Title>
                        <div
                            className="color-palette-block"
                            style={{
                                backgroundColor: colorList[0],
                                borderColor: colorList[2],
                                color: colorList[6],
                            }}
                        >
                            示例文本
                        </div>
                        <div className="color-palette-info">
                            <p>背景色: 第1阶 ({colorList[0]})</p>
                            <p>边框色: 第3阶 ({colorList[2]})</p>
                            <p>文字色: 第7阶 ({colorList[6]})</p>
                        </div>
                    </div>
                )}
            </Card>
        </div>
    );
};

export default ColorPickerDemo;
